<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒模型</title>
		<style>
			div{
				/* div有宽没高：设置宽高 */
				width: 300px;
				height: 300px;
				border: 1px solid red;
				/* 盒/框模型：页面任何元素存在于盒模型中
				        组成：外边距+边框+内边距+内容
						外边距:margin属性与border属性用法一致
						语法：属性值1个，代表4个方向，顺时针：上，右，下，左
						     属性值2个,代表4个方向，顺时针：上下 右左
							                      自适应居中：0 auto
							 属性值3个，代表4个方向，顺时针：上 右左 下
							 属性值4个，代表4个方向，顺时针：上，右，下，左
							 外边距-方向属性：
							 margi-left:数值px;
							 marhin-right:数值px;
							 margin-top:数值px;
							 margin-bottom:数值px;
						*/
					   margin: 20px;/* 上 右 下 左*/
					   margin: 10px 100px;/* 上下 右左 */
					   margin: 10px 20px 333px;/* 上 右左 下 */
					   margin: 100px 200px 30px 100px;/* 上，右，下，左 */
					   /* 自适应居中*/
					   margin: 0 auto;
					   /* 元素向下移动100个像素*/
					   margin-top: 100px;
					   /* 内边距：padding属性与margin属性使用方法类似
					   特点：边框与内容之间的距离
					   语法：属性值1个，代表4个方向，顺时针：上，右，下，左
					        属性值2个,代表4个方向，顺时针：上下 右左
					   	 属性值3个，代表4个方向，顺时针：上 右左 下
					   	 属性值4个，代表4个方向，顺时针：上，右，下，左
					   内边距-方向与外边距-方向一致
					   */
					   padding: 50px;
					   padding: 50px 100px;
					   padding: 50px 100px 200px;
					   padding: 50px 100px 200px 300px;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>